<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/nav.css"/>
		<link rel="stylesheet" type="text/css" href="css/security.css"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		       <!-- 头部 -->
        <header>
            <div class="header-in">
                <p>
                    <a href="">91人气APP(商家版)</a>
                </p>
                <ul>
                    <li>
                        <a href="../../html/login.html">登陆</a><span>-</span><a href="../../html/regist.html">注册</a>
                    </li>
                    <li><a href="../../yanlei/app/more.html">帮助中心</a></li>
                    <li><a href="qq.html">联系客服</a></li>
                </ul>
            </div>
        </header>
        <!-- 导航 -->
        <nav>
            <div class='nav-in'>
                <div class='nav-l'>
                    <img src="img/logo_03.png" alt="" />
                    <p class='logo-r'><img src="img/logo_06.png" alt="" /></p>
                </div>
                <div class='nav-r'>
                    <ul>
                        <li><a href="../../index.html" class='first'>首页</a></li>
                        <li>
                            <a href="" class='nav-lan'>优势<span><img src="img/hot.png" alt="" /></span></a>
                            <div class='xia'>
                                <span style='font-size:40px;' class='guan'>x</span>
                                <a href="../../91yxf/app/advantage.html">独家优势</a>
                                <a href="../../91yxf/app/security.html">安全保障</a>
                                <a href="../../91yxf/app/exp.html">免费体验</a>
                                <span style='border-top:solid 1px gainsboro'>优势</span>
                            </div>
                        </li>
                        <li>
                            <a href="" class='nav-lan'>业务</a>
                            <div class='xia'>
                                <span style='font-size:40px;' class='guan'>x</span>
                                <a href="../../html/serviceProduct.html">产品业务</a>
                                <a href="../../html/serviceEffe.html">效果作用</a>
                                <span style='border-top:solid 1px gainsboro'>业务</span>
                            </div>
                        </li>
                        <li>
                            <a href="" class='nav-lan'>发现<span><img src="img/hot.png" alt="" /></span></a>
                            <div class='xia'>
                                <span style="font-size: 40px;" class='guan'>x</span>
                                <a href="../../fenye/app/vip.html">VIP中心</a>
                                <a href="../../fenye/app/active.html">常规活动</a>
                                <a href="../../html/activity.html">热门活动</a>
                                <a href="../../yanlei/app/more.html">公告</a>
                                <span style="border-top: 1px solid gainsboro;">发现</span>
                            </div>
                        </li>
                        <li>
                            <a href="" class='nav-lan'>更多</a>
                            <div class='xia'>
                                <span style="font-size: 40px;" class='guan'>x</span>
                                <a href="../../yanlei/app/more.html">商家指南</a>
                                <a href="../../html/AboutUs.html">关于我们</a>
                                <span style="border-top: 1px solid gainsboro;">更多</span>
                            </div>
                        </li>
                    </ul>
                    <p>
                        <a href="../../html/login.html" class='login'>登陆</a>
                        <a href="../../html/regist.html" class='zhuce'>注册</a>
                    </p>
                </div>
            </div>
        </nav>
		<div class="wrap">
			<div class="into">
				<div class="circle-out">
					<div class="c"></div>
					<p>IP<br>限制</p>
					<div class="c4"></div>
				</div>
				<div class="circle-out">
					<div class="c"></div>
					<p>申诉<br>机制</p>
					<div class="c4"></div>
				</div>
				<div class="circle-out">
					<div class="c"></div>
					<p>多重<br>认证</p>
					<div class="c4"></div>
				</div>
				<div class="circle-out">
					<div class="c"></div>
					<p>实时<br>监控</p>
					<div class="c4"></div>
				</div>
				<div class="circle-middle">
					<div class="c" style="background: url(img/mnetj_03.png);"></div>
					<div class="c1"></div>
					<div class="c2"></div>
					<div class="c3">
						<p>加入网监，时刻监控数据</p>
						网络监察：按照国家有关法律法规的规定依法对互联网实施监控。查处利用网络实施的金融诈骗、盗窃、贪污、窃取等违法犯罪案件。
					</div>
					<div class="c4">网监</div>
				</div>
				<div class="circle-middle">
					<div class="c" style="background: url(img/m91_03.png);"></div>
					<div class="c1"></div>
					<div class="c2"></div>
					<div class="c3">
						<p>网站备案，企业档案资料齐全</p>
						网站备案信息：全国公安机关企业档案备案，若存在欺诈行为，可登陆网络违法举报网进行举报。
					</div>
					<div class="c4">备案</div>
				</div>
				<div class="circle-middle">
					<div class="c" style="background: url(img/msesame_03.png);"></div>
					<div class="c1"></div>
					<div class="c2"></div>
					<div class="c3">
						<p>加入芝麻信用体系机制</p>
						公司引入蚂蚁金服旗下独立的第三方征信机构芝麻信用的考评机制，为你保驾护航。
					</div>
					<div class="c4">芝麻信用</div>
				</div>
				<div class="circle-inner">
					<div class="c1"></div>
					<div class="c2"></div>
					<div class="c3"></div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			var posArr = [[51,217],[724,115],[204,790],[947,505],[315,287],[717,365],[428,586],[413,287]];
			var changeEndArr = [[-269,178],[163,-143],[210,125]];
			var changeOldArr = [[-800,178],[700,-143],[210,400]];
			$('.into>div').each(function(index){
				$('.into>div').eq(index).css({
					left:posArr[index][0],
					top:posArr[index][1]
				});
				$(this).mouseenter(function(){
					$('.c').eq(index).show();
					$('.c4').eq(index).hide();
					$(this).mouseleave(function(){
						$('.c').eq(index).hide();
						$('.c4').show();
					});
				});
			});
			$('.circle-middle').each(function(index){
				$(this).mouseenter(function(){
					$('.circle-middle .c3').eq(index).show()
					.css({
						left:changeOldArr[index][0],
						top:changeOldArr[index][1]
					})
					.animate({
						left:changeEndArr[index][0],
						top:changeEndArr[index][1]
					},1000);	
					$(this).mouseleave(function(){
						$('.circle-middle .c3').eq(index).hide();
					});
				});			
			});
		});
		       //导航
        $('.nav-lan').each(function(i) {
            $('.nav-lan').eq(i).on('click',function(e) {
                var e = e || window.event;
                e.preventDefault();
                $('.xia').eq(i).show().siblings().hide();
                $('.nav-lan').eq(i).show();
            })
        })
        //关闭隐藏div
        $('.guan').each(function(i) {
            $('.guan').eq(i).on('click',function() {
                $('.xia').eq(i).hide();
                console.log($('.xia').eq(i));
            })
        })
	</script>
</html>
